<template>
	<div class="system-role-dialog-container">
		<el-dialog :title="state.dialog.title" center class="borderRadius10" v-model="state.dialog.isShowDialog" width="490">
			<el-form ref="roleDialogFormRef" :rules="rules" :model="state.ruleForm" label-width="120px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="规格名称："  prop="specName">
							<el-input class="width260" v-model="state.ruleForm.specName" placeholder="请输入标题名称" clearable></el-input>
						</el-form-item>
					</el-col>
                    <el-col class="mb20">
						<el-form-item label="规格值：">
							<section>
								<div>
									<el-tag class="mr15" closable  v-for="(item,index) in state.ruleForm.specItemList" :key="index" @close="handleItemClose(index)">{{ item.specItemName }}</el-tag>
									<el-input class="width160 mr15" v-model="state.ruleForm.value" placeholder="请输入" clearable></el-input>
									<el-button type="primary" @click="addSpecItem()">确定</el-button>
								</div>
							</section>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel">取 消</el-button>
					<el-button type="primary" @click="onSubmitForm(roleDialogFormRef)">
						{{ state.dialog.submitTxt }}
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">

import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router';
import { specificationAdd} from '/@/api/commodity';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
// 定义变量内容
const addSpecRef = ref<FormInstance>();
// 定义变量内容
const roleDialogFormRef = ref();
const state = reactive({
	loading:false,
	productTypeList:[] as Array<any>, //模板类型
	ruleForm: {
		specId:null,
		specName: '', // 模板名称
		specItemList:[] as any,
		value: ''  // input 框添加项的值
	},
	addSpecForm:{
		specName: '', // 新增规格项名称
		specValue:'', // 新增规格项值
	},
	menuData: [] as TreeType[],
	menuProps: {
		children: 'children',
		label: 'label',
	},
	dialog: {
		isShowDialog: false,
		type: 'add',
		title: '',
		submitTxt: '',
	},
	isAddSpecItem:false
});

const rules = reactive<FormRules<any>>({
	typeId: [ { required: true, message: '请选择模板类型', trigger: 'change' }],
	specName: [ { required: true, message: '请输入规格名称', trigger: 'blur' }],
	specValue: [ { required: true, message: '请输入规格项名称', trigger: 'change', }],
})


// 打开弹窗
const openDialog = (type: string, row?: RowRoleType) => {
	console.log(JSON.stringify(row));
	state.dialog.type = type
	if (type === 'edit') {
		state.dialog.title = '商品规格';
		state.dialog.submitTxt = '修 改';
		state.ruleForm = Object.assign({}, row);
	} else {
		state.dialog.title = '商品规格';
		state.dialog.submitTxt = '新 增';
		state.ruleForm =  {
			specId: null,
			specName: '', // 模板名称
			specItemList:[] as any,
			value: '', //
		};
	}
	state.dialog.isShowDialog = true;
};



// 模板类型(跟随商品选择)
const addSpecItem =  () => {
	if(state.ruleForm.value == ''){
		ElMessage.warning('规格值不能为空');
		return
	}
	state.ruleForm.specItemList.push({specItemName:state.ruleForm.value});
	state.ruleForm.value = ''
}

// 移除规格项
const handleItemClose = (index: Number) => {
	state.ruleForm.specItemList.splice(index,1)
}

// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};


// 添加规格项
const onSubmitForm =  (formEl: FormInstance | undefined)  => {
	if (!formEl) return;
	formEl.validate ( async (valid: boolean)  => {
		if (valid) {
			if(state.ruleForm.specItemList.length == 0){
				ElMessage.success('请至少添加一项规格值');
				return false
			}else{
				state.loading = true;
				let params = {
					specId: state.ruleForm.specId,
					specName: state.ruleForm.specName,
					specItemList: state.ruleForm.specItemList,
				}
				const { data } = await specificationAdd(params);
				ElMessage.success('提交成功');
				state.loading = false;
				closeDialog();
				emit('refresh');
			}
		} else {
			ElMessage.success('请至少添加一项规格值');
			return false;
		}
	});
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">

</style>
